<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo-iselect</title>
<link href="../jsease.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../core.js"></script>
<script type="text/javascript" src="../mask.js"></script>
<script type="text/javascript" src="../ipop.js"></script>
<script type="text/javascript" src="../iselect.js"></script>
<style type="text/css">
.iselect
    {
    border:0;
    width:180px;
    }
    .iselect .cap
        {
        height:25px;
        width:100%;
        position:relative;
        }
        .iselect .cap .tit,
        .iselect .cap .sel
            {
            border:1px solid #abadb3;
            background:#fff;
            overflow:hidden;
            }
        .iselect .cap .tit .textval
            {
            width:100%;
            border:0;
            height:17px;
            line-height:17px;
            padding:3px 2px;
            cursor:default;
            }
        .iselect .cap .sel
            {
            padding:0;
            width:18px;
            position:absolute;
            right:0;
            top:0;
            border:0;
            text-align:center;
            }
            .iselect .cap .sel a.msa
                {
                text-decoration:none;
                outline:0;
                color:#00f;
                display:block;
                border:1px solid #abadb3;
                }
            .iselect .cap .sel a.msa .selA
                {
                width:16px;
                height:9px;
                line-height:9px;
                padding:2px 0 0;
                background:#fff;
                }
            .iselect .cap .sel a.msa .selV
                {
                padding:0 0 2px;
                height:10px;
                }
            .iselect .cap .sel a:hover.msa .selA
                {
                background:#def;
                }
    .iselect .opts
        {
        border:1px solid #abadb3;
        overflow-y:auto;
        background:#fff;
        text-align:left;
        }
        .iselect .opts a.opt
            {
            margin:0;
            outline:0;
            text-decoration:none;
            overflow:hidden;
            }
            .iselect .opts a.opt .txt
                {
                line-height:17px;
                height:17px;
                color:#000;
                }
            .iselect .opts a.sel .txt
                {
                background:#6af;
                color:#fff;
                }
                .iselect .opts a:hover.opt .txt
                    {
                    background:#39f;
                    color:#fff;
                    }
            .iselect .opts a.opt .txt .text,
            .iselect .opts a.opt .txt .title
                {
                float:left;
                }
            .iselect .opts a.opt .txt .title
                {
                width:50px;
                }

</style>
</head>

<body>
<div style="background:#ffe;text-align:center;"><input type="text" />
<div class="iselect">
    <div class="cap">
        <div class="tit"><input type="text" class="textval" value="2010" /></div>
        <div class="sel"><a class="msa" href="#"><div class="selA">&#9650;</div><div class="selA selV">&#9660;</div></a></div>
    </div>
</div>
<div class="iselect">
    <div class="opts">
        <a class="opt" href="#"><div class="txt">1</div></a>
        <a class="opt" href="#"><div class="txt">2</div></a>
        <a class="opt" href="#"><div class="txt">3</div></a>
        <a class="opt" href="#"><div class="txt">4</div></a>
        <a class="opt" href="#"><div class="txt">5</div></a>
        <a class="opt" href="#"><div class="txt">6</div></a>
        <a class="opt" href="#"><div class="txt">7</div></a>
        <a class="opt" href="#"><div class="txt">8</div></a>
        <a class="opt" href="#"><div class="txt">9</div></a>
        <a class="opt sel" href="#"><div class="txt">10</div></a>
        <a class="opt" href="#"><div class="txt">11</div></a>
        <a class="opt" href="#"><div class="txt">12</div></a>
        <a class="opt" href="#"><div class="txt">29</div></a>
        <a class="opt" href="#"><div class="txt">30</div></a>
        <a class="opt" href="#"><div class="txt">31</div></a>
        <a class="opt" href="#"><div class="txt">1</div></a>
        <a class="opt" href="#"><div class="txt">2</div></a>
        <a class="opt" href="#"><div class="txt">3</div></a>
        <a class="opt" href="#"><div class="txt">4</div></a>
    </div>
</div>
<input id="caldate" name="caldate" value="2010-06-20" type="text" readonly="readonly" style="padding:3px;margin:5px;" /></div>
<script type="text/javascript">
//<![CDATA[

//]]>
</script>

</body>
</html>